In Vue.js, the v-bind:class directive allows you to bind one or more CSS classes to an element’s class attribute. This can be useful for dynamically adding or removing classes based on the component’s state or props. The value of the directive should be an object, where the keys are the class names, and the values are Boolean expressions that determine whether the class should be added or removed.
How to Add or Remove Class to an element in Vue Js
we can use v-bind:class directive to bind one or more CSS classes to an element’s class attribute, and determine whether the classes should be added or removed based on the component’s state or props.
In this example, the active class will be added to the div element if the isActive data property is true, and removed if it is false.
Vue Js Toggle Class Binding Directive
<div id="app">
<div v-bind:class="{ active: isActive }">Font Awesome Icons</div>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
isActive: true
}
}
});
</script>
Output of above example
Before Toggle Class
After Toggle Class
